<template>
	<view class="control-examine-detail">
		<titleName :name="name" :backShow="true"></titleName>
		<view class="approve-down" v-if="approveFlag">
			<view class="top-bgc">
				<view class="enterprise">
					<view class="name">公司名称：{{params.customername}}</view>
					<view :class="params.shresult==1?'down':'val'">{{params.shresult==1?'已通过':'未通过'}}</view>
				</view>
				<view class="time">
					<view class="name">审批时间：</view>
					<view class="val">{{params.shtime}} </view>
				</view>
			</view>
			<template v-if="examineFlag==1">
				<view class="btm-bgc">
					<view class="con">
						<view class="name">预警等级：</view>
						<view class="val">
							{{params.colorlevel==1?'红色预警':params.colorlevel==2?'橙色预警':params.colorlevel==3?'黄色预警':''}}
						</view>
					</view>
					<view class="con">
						<view class="name">启警时间：</view>
						<view class="val">{{params.monitortimestr}}</view>
					</view>
					<view class="con">
						<view class="name">执行时间：</view>
						<view class="val">{{params.committime}}</view>
					</view>
					<view class="img-wrap">
						<view class="name">执行图片：</view>
						<view class="img">
							<image @click="lookImg" v-for="item,index in params.followattachurl.split(',')" :src="item"
								mode=""></image>
						</view>
					</view>
				</view>
			</template>
			<template v-if="examineFlag==2">
				<view class="btm-bgc">
					<view class="con">
						<view class="name">整改内容：</view>
						<view class="val">{{params.content}}</view>
					</view>
					<view class="con">
						<view class="name">备注：</view>
						<view class="val">{{params.followremark}}</view>
					</view>
					<view class="con">
						<view class="name">整改时间：</view>
						<view class="val">{{params.followtime}}</view>
					</view>
					<view class="img-wrap">
						<view class="name">整改图片：</view>
						<view class="img">
							<image @click="lookImg" v-for="item,index in params.followattachurl.split(',')"
								:src="resourceUrl+'home-enterprise-bgc.png'" mode=""></image>
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="wrap" v-if="!approveFlag">
			<view class="content">
				<view class="enterprise">
					<view class="name">公司名称：{{params.customername}}</view>
					<view class=""></view>
				</view>
				<template v-if="examineFlag==2">
					<view class="con">
						<view class="name">整改内容：</view>
						<view class="val">{{params.content}}</view>
					</view>
					<view class="remark">
						<view class="name">备注：</view>
						<view class="val">{{params.followremark}}</view>
					</view>
					<view class="time">
						<view class="name">整改时间：</view>
						<view class="val">{{params.committime?params.committime :''}}</view>
					</view>
				</template>
				<template v-if="examineFlag==1">
					<view class="con">
						<view class="name">预警等级：</view>
						<view class="val">
							{{params.colorlevel==1?'红色预警':params.colorlevel==2?'橙色预警':params.colorlevel==3?'黄色预警':''}}
						</view>
					</view>

					<view class="time">
						<view class="name">启警时间：</view>
						<view class="val">{{params.monitortimestr}}</view>
					</view>
					<view class="time">
						<view class="name">执行时间：</view>
						<view class="val">{{params.committime}}</view>
					</view>
				</template>
				<view class="img-wrap">
					<view class="name">{{examineFlag==1?'执行':'整改'}}图片：</view>
					<view class="img">
						<image @click="lookImg(item,index)" v-for="item,index in params.followattachurl?.split(',')"
							:src="item" mode=""></image>
					</view>
				</view>
				<view class="btn-wrap">
					<button class="pass" @click="pass">通过</button>
					<button class="reject" @click="reject">驳回</button>
				</view>
			</view>
		</view>
		<view class="mask" v-if="maskFlag">
			<template v-if="!rejectFlag">
				<view class="wrap">
					<image class="status" :src="passStatus?resourceUrl+'send-suc.png':resourceUrl+'reject-icon.png'"
						mode=""></image>
					<text>{{passStatus?'已通过！':'已驳回！'}}</text>
				</view>
				<image class="error" @click="maskFlag=false" :src="resourceUrl+'black-err.png'"></image>
			</template>
			<template v-if="rejectFlag">
				<view class="container">
					<view class="title">
						驳回原因
					</view>
					<view class="ipt-wrap">
						<textarea placeholder="请输入原因"
							placeholder-style="font-weight: 400;font-size: 31rpx;color: #BFBEBE;"
							v-model="shdescription"></textarea>
					</view>
					<view class="btn-wrap">
						<button class="sure" @click="sureReject">确认驳回</button>
						<button class="del" @click="maskFlag=false">返回</button>
					</view>
				</view>
				<image class="error" @click="maskFlag=false" :src="resourceUrl+'black-err.png'"></image>
			</template>
		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'

	import {
		resourceUrl
	} from '../../request/config'
	import http from '../../request/index.js'
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	let name = "审批详情"
	let seltop = ref(1)
	let examineFlag = ref('') //判断审核类型
	let dataList = ref([])
	let title = ref('')
	let approveFlag = ref(false) //是否已审批
	let single = ref('')

	let usertype = ref('')
	let params = ref({})
	let shdescription = ref('')
	let passStatus = ref(true)
	let maskFlag = ref(false)
	let rejectFlag = ref(true)
	onLoad((e) => {
		console.log(e, 'e');
		examineFlag.value = e.examineFlag
		params.value = JSON.parse(e.item)



		if (params.value.shstatus == 1) {
			approveFlag.value = true
		} else {
			approveFlag.value = false
		}
		console.log(e, 'eexamineFlag');


	})
	onShow(() => {

	})
	let lookImg = (item, index) => {
		uni.previewImage({
			urls: params.value.followattachurl.split(','),
			current: index
		})
	}
	let getList = () => {



	}
	let pass = () => {

		uni.showModal({
			title: '提示',
			content: '确认审批通过吗?',
			success: function(res) {
				if (res.confirm) {
					http({
						url: "/greenAdmNotice/doPermit",
						data: {
							enterpriseid: params.value.id,
							noticeid: params.value.noticeid,
							status: 3
						}
					}).then((res) => {
						if (res.code == 0) {
							maskFlag.value = true
							passStatus.value = true
							rejectFlag.value = false
							setTimeout(() => {
								uni.navigateBack()

							}, 2000)
						}
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});


	}
	let sureReject = () => {
		http({
			url: "/greenAdmNotice/doPermit",
			data: {
				enterpriseid: params.value.id,
				noticeid: params.value.noticeid,
				status: 2,
				shdescription: shdescription.value
			}
		}).then((res) => {
			if (res.code == 0) {
				maskFlag.value = true
				passStatus.value = false
				rejectFlag.value = false
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			}
		})


	}
	let reject = () => {
		maskFlag.value = true
		passStatus.value = false
		rejectFlag.value = true
	}
</script>

<style lang="scss" scoped>
	.control-examine-detail {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.mask {
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, .7);
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.container {
				width: 587rpx;
				height: 547rpx;
				background: #FFFFFF;
				border-radius: 21rpx;
				padding: 50upx 31upx 0 36upx;

				.title {

					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 33rpx;
					color: #000000;

				}

				.ipt-wrap {
					width: 100%;
					height: 201rpx;
					background: #FAFAFA;
					border-radius: 14rpx;
					border: 1px solid #BFBFBF;
					margin-top: 32upx;

					textarea {
						width: 100%;
						height: 100%;
						padding: 10upx;
					}
				}

				.btn-wrap {
					display: flex;
					align-items: center;
					padding: 0 20upx 0 16upx;
					margin-top: 88upx;
					justify-content: space-between;

					.sure {
						width: 225rpx;
						height: 78rpx;
						background: #0874FA;
						border-radius: 39rpx;

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 34rpx;
						color: #FFFFFF;
						line-height: 78upx;

					}

					.del {
						width: 225rpx;
						height: 78rpx;
						background: #FA7408;
						border-radius: 39rpx;

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 34rpx;
						color: #FFFFFF;
						line-height: 78upx;
					}
				}
			}

			.wrap {
				width: 587rpx;
				height: 547rpx;
				background: #FFFFFF;
				border-radius: 21rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding: 0;

				.status {
					width: 288upx;
					height: 241upx;

				}

				text {
					margin-top: 60upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 42rpx;
					color: #000000;

				}
			}

			.error {
				margin-top: 56upx;
				width: 57upx;
				height: 57upx;
			}
		}

		.approve-down {
			width: 100vw;
			height: calc(100vh - 160upx);
			background: #F3F5F7;
			padding: 26upx 24upx 0upx 24upx;
			overflow: scroll;

			.btm-bgc {
				width: 100%;
				margin-top: 18upx;
				background: #FFFFFF;
				border-radius: 14rpx;
				padding: 40upx 0 100upx 30upx;

				.con {
					display: flex;
					align-items: center;
					margin-top: 32upx;

					.name {
						flex-shrink: 0;
						align-self: flex-start;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 31rpx;
						color: #404246;

					}

					.val {

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 31rpx;
						color: #080A0B;

					}
				}

				.img-wrap {
					display: flex;
					flex-direction: column;
					margin-top: 32upx;

					.name {

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 31rpx;
						color: #404246;

					}

					.img {

						image {
							margin-top: 30upx;
							margin-left: 20upx !important;
							width: 200rpx;
							height: 220rpx;
							border-radius: 10upx;
						}

						image:nth-of-type(3n+1) {
							margin-left: 0upx !important;
						}

						// image:nth-of-type(2n) {
						// 	margin-left: 20upx !important;
						// }


					}

				}
			}

			.top-bgc {
				background-color: #fff;
				width: 100%;

				height: 188rpx;
				background: #FFFFFF;
				border-radius: 14rpx;
				padding: 40upx 20upx 0 24upx;

				.time {
					display: flex;
					align-items: center;
					margin-top: 30upx;

					.name {

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 31rpx;
						color: #404246;

					}

					.val {

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 31rpx;
						color: #080A0B;

					}
				}

				.enterprise {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {

						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 35rpx;
						color: #080A0B;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

					}

					.down {
						width: 104rpx;
						height: 46rpx;

						border-radius: 7rpx;
						text-align: center;
						background: rgba(8, 116, 250, .2);
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 26rpx;
						color: #0874FA;
						line-height: 46rpx;
					}

					.val {
						width: 104rpx;
						height: 46rpx;

						border-radius: 7rpx;
						text-align: center;

						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 26rpx;

						line-height: 46rpx;
						background: rgba(250, 8, 8, .2);
						color: #FA0808;
					}
				}
			}

		}

		.wrap {
			width: 100vw;
			height: calc(100vh - 160upx);
			background: #F3F5F7;
			padding: 26upx 24upx 96upx 24upx;
			overflow: scroll;

			.content {
				width: 100%;
				background: #FFFFFF;
				padding: 40upx 0 200upx 34upx;

				.enterprise {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-right: 20upx;

					.name {
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 35rpx;
						color: #080A0B;
					}



				}

				.con {
					display: flex;
					align-items: center;
					margin-top: 32upx;

					.name {

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 31rpx;
						color: #404246;
						flex-shrink: 0;
						align-self: flex-start;
					}

					.val {

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 31rpx;
						color: #080A0B;

					}
				}

				.remark {
					display: flex;
					align-items: center;
					margin-top: 32upx;

					.name {

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 31rpx;
						color: #404246;

					}

					.val {

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 31rpx;
						color: #080A0B;

					}
				}

				.time {
					display: flex;
					align-items: center;
					margin-top: 32upx;

					.name {

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 31rpx;
						color: #404246;
						flex-shrink: 0;
						align-self: flex-start;
					}

					.val {

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 31rpx;
						color: #080A0B;

					}
				}

				.btn-wrap {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 34upx 0 2upx;
					margin-top: 188upx;

					.pass {
						width: 296rpx;
						height: 78rpx;
						background: #0874FA;
						border-radius: 39rpx;

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 34rpx;
						color: #FFFFFF;
						line-height: 78upx;
					}

					.reject {
						width: 296rpx;
						height: 78rpx;
						background: #FA7408;
						border-radius: 39rpx;

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 34rpx;
						color: #FFFFFF;
						line-height: 78upx;

					}
				}

				.img-wrap {
					display: flex;
					flex-direction: column;
					margin-top: 32upx;

					.name {

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 31rpx;
						color: #404246;

					}

					.img {
						image {
							margin-top: 30upx;
							margin-left: 20upx !important;
							width: 200rpx;
							height: 220rpx;
							border-radius: 10upx;
						}

						image:nth-of-type(3n+1) {
							margin-left: 0upx !important;
						}
					}

				}

			}
		}



	}
</style>